<template>
  <el-card class="wishlist-item">
    <div>
      <img :src="product.imageUrl" alt="" class="product-image">
      <h3>{{ product.name }}</h3>
      <p>价格：{{ product.price }}￥</p>
      <p>{{ product.description }}</p>
      <el-button type="danger" @click="removeFromWishlist">从收藏夹移除</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'WishlistItem',
  props: ['product'],
  methods: {
    removeFromWishlist() {
      this.$store.dispatch('removeFromWishlist', this.product.id);
    }
  }
};
</script>

<style>
.wishlist-item {
  margin-bottom: 10px;
}
.product-image {
  max-width: 100%;
  height: auto;
}
</style>